// Copyright © 2021 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.modal
  background: light-dark(var(--c-bg-neutral-min), var(--c-bg-neutral-extralight))
  border-radius: $br.l
  border: 1px solid var(--c-border-neutral-light)
  display: flex
  flex-direction: column
  box-shadow: var(--shadow-box-modal-normal)

  &-absolute
    top: 50%
    left: 50%
    position: fixed
    transform: translate(-50%, -50%)
    z-index: $zi.modal
    width: 60%
    max-height: 80vh

    +media-query-min($bp.sm)
      min-width: 385px
      max-width: 780px

    +media-query($bp.sm)
      full-screen($ls.xxs)
      border: 0
      border-radius: 0
      justify-content: space-between

  &-inline
    border-dark()
    max-width: 800px

.title-section
  horizontalize()
  padding: $ls.m $ls.l
  align-items: center
  flex-shrink: 0

  +media-query($bp.sm)
    flex-wrap: wrap-reverse
    padding: $ls.s $ls.s

  & > div:first-child
    flex-shrink: 1
    margin-right: $cs.m

    span
      eat-text-margins()
      display: block

  .title
    margin-bottom: 0
    text-margin-top()

    &:last-child
      text-margin-bottom()

    &:not(:last-child)
      text-margin-bottom($cs.m)

  .logo
    max-width: 12rem
    max-height: 7rem
    height: auto
    width: auto
    flex-shrink: 0
    margin-bottom: 0

    +media-query($bp.sm)
      margin-bottom: $ls.s
      align-items: flex-start

.line
  height: 1px
  width: 18%
  background-color: var(--c-border-neutral-normal)
  margin-left: $cs.xl3
  flex-shrink: 0
  margin-bottom: -4px // Compensate for own visual height.

  +media-query($bp.sm)
    margin-left: $cs.xl

.body
  padding: $ls.m $ls.l
  overflow-x: auto
  flex-grow: 1

  +media-query-min($bp.sm)
    horizontalize()

  +media-query($bp.sm)
    padding: $ls.s $ls.s

.message
  eat-text-margins()

.control-bar
  horizontalize()
  border-dark('top')
  padding: $cs.l
  flex-shrink: 0
  flex-grow: 0
  align-items: center

  & > div:first-child
    align-items: center
    display: flex
    color: var(--c-text-neutral-light)

    +media-query($bp.sm)
      text-align: center

    div > span
      display: block

    & > span
      nudge('up')
      margin-right: $cs.m

  & > div:last-child
    display: flex
    align-items: center
    +media-query($bp.sm)
      margin-bottom: $cs.s
      flex-direction: row
      align-items: stretch
      gap: 1rem

      button:not(:last-child)
        margin-right: 0
        margin-right: $cs.s

  +media-query($bp.sm)
    flex-direction: column-reverse

.shadow
  position: fixed
  width: 100vw
  height: 100vh
  top: 0
  bottom: 0
  left: 0
  right:0
  background: rgba(0, 0, 0, .85)
  z-index: $zi.modal
